<template>
  <div class="author_filtrate">
    <Filtrate>
      <div class="filtrate_kind" @click="onGender">
        <span>性别：{{ store.state.authorFiltrate.gender }}</span>
        <svg class="fuhaoxiala_icon" aria-hidden="true">
          <use xlink:href="#icon-fuhaoxiala"></use>
        </svg>
      </div>
    </Filtrate>
  </div>
</template>

<script>
import Filtrate from "@/components/Filtrate/Filtrate";
import { useStore } from "vuex";
export default {
  name: "AuthorFiltrate",
  components: { Filtrate },
  setup() {
    const store = useStore();
    //修改弹出框状态
    const onIspoup = () => {
      // console.log(11);
      store.commit("popup/handleIspoup");
    };
    // //点击选择种类
    // const onKind = () => {
    //   onIspoup()
    //   //修改弹出框类型
    //   store.commit("popup/handlePopupKind",'kind')
    // };
    //点击选择品种
    const onGender = () => {
      onIspoup();
      store.commit("popup/handlePopupKind", "gender");
      store.commit("popup/handleColumns", ["男", "女"]);
    };
    return {
      onGender,
      store,
    };
  },
};
</script>

<style scoped lang="less">
.author_filtrate {
  //position: fixed;
  //top: 2.5rem;
  //left: 0;
  z-index: 99;
  width: 100%;
  height: 1.5rem;
  box-sizing: border-box;
  background-color: aliceblue;
  //border: 1px solid red;
}
.filtrate_kind,
.filtrate_variety {
  span {
    font-size: 0.9rem;
    color: #576b95;
  }
}
.fuhaoxiala_icon {
  width: 1em;
  height: 1em;
  color: #1989fa;
  vertical-align: -0.2em;
  fill: currentColor;
  overflow: hidden;
}
</style>
